<template>
  <div class="home">
    <my-header v-model="inputVal" @blur="seacrch"></my-header>
    <my-history v-if="list.length==0" @check="sear"></my-history>
    <ul v-else>
      <li v-for="(item,index) in list" :key="index">{{item.goods_name}}</li>
    </ul>
  </div>
</template>

<script>
import MyHeader from '../components/myHeader.vue'
// @ is an alias to /src
import { ref } from 'vue';
import axios from 'axios';
import MyHistory from '../components/myHistory.vue';
import { useStore } from 'vuex';
export default {
  name: 'Home',
  components: {
    MyHeader,
    MyHistory
  },
  setup(props) {
    const { commit } = useStore();
    const inputVal = ref('');
    const list = ref([]);
    const seacrch = () => { // 失去焦点的事件
       axios.get(`https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query=${inputVal.value}`).then(res => {
         if (inputVal.value){
           commit('add',inputVal.value);
         }
         list.value = res.data.message || [];
       })
    }

    const sear = (val) => {
       inputVal.value = val;
       seacrch();
    }
    return {
      inputVal,
      seacrch,
      list,
      sear
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    height: 100%;
    ul{
      height: calc(100% - 50px);
      overflow: auto;
    }
  }
</style>
